import React,{useContext} from 'react'
import context from './context'

function TodoItem({ data, index }) {
    // 函数组件没有this
    // 函数组件的第一个参数为props

    const {removeItem,completeItem} = useContext(context);


    // Consumer方法
    return (
        <tr className={data.done ? 'table-success' : ''}>
            <th scope="row">{index + 1}</th>
            <td>{data.todo}</td>
            <td>{data.date}</td>
            <td>{data.done ? '是' : '否'}</td>
            <td>
                <i className="bi bi-check-square me-3" onClick={completeItem.bind(null, data.id)}></i>
                <i className="bi bi-x-square" onClick={removeItem.bind(null, data.id)}></i>
            </td>
        </tr>
    )
}



export default TodoItem;